<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <div class="el-card">
      <Search />
      <btnAll />

      <div class="card_left">
        <div class="top">项目资料</div>
        <el-tabs
          tab-position="left"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane name="first"
            ><span slot="label"
              ><i class="iconfont icon-gerenzhongxin"></i> 我上传的文件</span
            >
            <div class="nav_title">
              <span v-if="title">{{ title }}</span>
            </div>
            <allTable />
          </el-tab-pane>
          <el-tab-pane name="second"
            ><span slot="label"
              ><i class="iconfont icon-fenxiang_o"></i> 项目文件</span
            >
            <div class="nav_title">
              <span v-if="title">{{ title }}</span>
            </div>
            项目文件</el-tab-pane
          >
          <el-tab-pane name="third"
            ><span slot="label"
              ><i class="iconfont icon-xingxing"></i> 图纸文件</span
            >
            <div class="nav_title">
              <span v-if="title">{{ title }}</span>
            </div>
            图纸文件</el-tab-pane
          >
          <el-tab-pane name="forth"
            ><span slot="label"
              ><i class="iconfont icon-zuijinliulan"></i> 最近浏览</span
            >
            <div class="nav_title">
              <span v-if="title">{{ title }}</span>
            </div></el-tab-pane
          >
        </el-tabs>
        <div class="top" style="margin-top: 30px">已完成项目资料</div>
        <el-tabs tab-position="left">
          <el-tab-pane
            ><span slot="label"
              ><i class="iconfont icon-gerenzhongxin"></i> 我上传的文件</span
            >我上传的文件</el-tab-pane
          >
          <el-tab-pane
            ><span slot="label"
              ><i class="iconfont icon-fenxiang_o"></i> 项目文件</span
            >项目文件</el-tab-pane
          >
          <el-tab-pane
            ><span slot="label"
              ><i class="iconfont icon-xingxing"></i> 图纸文件</span
            >图纸文件</el-tab-pane
          >
          <el-tab-pane
            ><span slot="label"
              ><i class="iconfont icon-zuijinliulan"></i> 最近浏览</span
            >最近浏览</el-tab-pane
          >
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Search from './component/search.vue'
import btnAll from './component/btnAll.vue'
import allTable from './component/allTable.vue'
export default {
  components: {
    Search,
    btnAll,
    allTable,
  },
  data() {
    return {
      activePath: {
        path: '',
        title: '资料管理',
      },
      activeName: 'first',
      titleName: '',
    }
  },
  computed: {
    title() {
      console.log('???????', this.titleName)
      let name
      switch (this.activeName) {
        case 'first':
          name = this.titleName ? `我的文件 > ${this.titleName}` : '我的文件'
          break
        case 'second':
          name = this.titleName ? `项目文件 > ${this.titleName}` : '项目文件'
          break
        case 'third':
          name = this.titleName ? `图纸文件 > ${this.titleName}` : '图纸文件'
          break
        case 'forth':
          name = this.titleName ? `最近浏览 > ${this.titleName}` : '最近浏览'
          break
        default:
          ''
          break
      }
      console.log('asfhasfhjashf', name)
      return name
    },
  },
  methods: {
    handleClick() {
      console.log(this.activeName)
    },
  },
}
</script>

<style lang="scss" scoped>
.page_main {
  height: 100%;
  width: 100%;
}
.el-card {
  padding: 20px;
  background-color: #fff;
  box-shadow: 2px 2px 2px rgba(255, 245, 236, 0.3);
  .card_left {
    width: 100%;
    .top {
      font-size: 16px;
      color: #666;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>